
/**
 * 返回一个 Promise 对象，用于监听指定目标节点子节点增加情况
 *
 * @param {HTMLElement} targetNode 要监听的目标DOM节点
 * @returns {Promise} 子节点添加的 Promise 对象
 */
export function observeChildNode(targetNode: HTMLElement) {
    return new Promise((resolve, reject) => {
        let observer;
        try {
            // 创建观察器对象，并传入回调函数
            observer = new MutationObserver((mutationsList, observer) => {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                        // 解除监听，释放资源
                        observer.disconnect();
                        // 返回触发事件的子节点数组
                        resolve(mutation.addedNodes);
                    }
                }
            });

            // 配置观察选项
            const config = { childList: true };

            // 开始观察目标节点
            observer.observe(targetNode, config);
        } catch (error) {
            observer && observer.disconnect();
            reject(error);
        }
    });
}

/**
 * @description dom样式注入
 * @param dom [HTMLELment || HTMLELment[]]
 * @param prop [string || object]
 * @param value? [string]
 * @returns Function
 */
export const injectStyle = (doms: any, prop: any, value?: string) => {
    const PROP_TYPE = Object.prototype.toString.call(prop).replace(/^\[object (\S+)\]$/, "$1")
    const DOMS_TYPE = Object.prototype.toString.call(doms).replace(/^\[object (\S+)\]$/, "$1")

    // 判断doms是否为数组或者类数组
    if (DOMS_TYPE === "HTMLCollection" || DOMS_TYPE === "NodeList" || DOMS_TYPE === "Array") {
        doms = Array.from(doms) as HTMLElement[]
        if (PROP_TYPE === "Object") {
            for (let key in prop) {
                prop.hasOwnProperty(key) && doms.forEach((item: HTMLElement) => (item.style[key] = prop[key]))
            }
        } else if (PROP_TYPE === "String" && value) {
            doms.forEach((item: HTMLElement) => (item.style[prop] = value))
        }
    } else {
        // 不是数组或者类数组,则为单个dom
        const dom = doms as HTMLElement
        if (PROP_TYPE === "Object") {
            for (let key in prop) {
                prop.hasOwnProperty && (dom.style[key] = prop[key])
            }
        } else if (PROP_TYPE === "String" && value) {
            dom.style[prop] = value
        }
        return dom
    }
    return doms
}

/**
 * @description dom样式移除
 * @param dom [HTMLELment || HTMLELment[]]
 * @param prop [string || string[]]
 * @returns HTMLElement || HTMLElement[]
*/
export const removeStyle = (doms: any, prop: any) => {
    const PROP_TYPE = Object.prototype.toString.call(prop).replace(/^\[object (\S+)\]$/, "$1")
    const DOMS_TYPE = Object.prototype.toString.call(doms).replace(/^\[object (\S+)\]$/, "$1")

    // 判断doms是否为数组或者类数组
    if (DOMS_TYPE === "HTMLCollection" || DOMS_TYPE === "NodeList" || DOMS_TYPE === "Array") {
        doms = Array.from(doms) as HTMLElement[]
        if (PROP_TYPE === "String") {
            doms.forEach((item: HTMLElement) => (item.style.removeProperty(prop)))
        } else if (PROP_TYPE === "Array") {
            doms.forEach((item: HTMLElement) => {
                prop.forEach((key: string) => (item.style.removeProperty(key)))
            })
        }
    } else {
        // 不是数组或者类数组,则为单个dom
        const dom = doms as HTMLElement
        if (PROP_TYPE === "String") {
            dom.style.removeProperty(prop)
        } else if (PROP_TYPE === "Array") {
            prop.forEach((key: string) => (dom.style.removeProperty(key)))
        }
        return dom
    }
    return doms
}

// 获取dom元素
export function getEl(selector: string) {
    if (!selector) return;
    return document.querySelector(selector);
}
export function getEls(selector: string) {
    if (!selector) return;
    return document.querySelectorAll(selector);
}